<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<link href="<%=request.getContextPath()%>/css/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/profile.css"
	rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/jquery.validate.min.js"></script>
<script>

$(document).ready(function() {
	if ($("#turnOn").val() == 'false') {
		turnOff();
	} else {
		turnOn();
	}
	
	var i = 1;
	$(".working-table input[type='checkbox']").each(function () {
		if ($(this).attr("checked") == false) {
			$("#startHour" + i).attr("disabled", "disabled");
			$("#startMin" + i).attr("disabled", "disabled");
			$("#endHour" + i).attr("disabled", "disabled");
			$("#endMin" + i).attr("disabled", "disabled");
		}
		i++;
	});
	
	var items = $(".working-table input[type='checkbox']").change(function () {
		var index = items.index(this) + 1;
		if ($(this).attr("checked") == true) {
			$("#startHour" + index).removeAttr("disabled");
			$("#startMin" + index).removeAttr("disabled");
			$("#endHour" + index).removeAttr("disabled");
			$("#endMin" + index).removeAttr("disabled");
		} else {
			$("#startHour" + index).attr("disabled", "disabled");
			$("#startMin" + index).attr("disabled", "disabled");
			$("#endHour" + index).attr("disabled", "disabled");
			$("#endMin" + index).attr("disabled", "disabled");
		}
	});
	
	
	$("#addRoom").validate({
		rules: {
			roomName: {
				required: true
			},
			"workingDay[]": {
				required: true
			}
		},
		messages: {
			roomName: {
				required: "Vui lòng nhập tên phòng khám"
			},
			"workingDay[]": {
				required: "Vui lòng chọn ít nhất 1 ngày làm việc"
			}
		},
		errorPlacement:function(error,element) {
            if (element.attr("name") == "workingDay[]") {
                $("#errorDiv").html(error);
            } else {
                error.insertAfter(element);
            }
    	},
	 	submitHandler: function(form) {
	 		var error = false;
	 		var items = $(".working-table input[type='checkbox']").each(function (index) {
	 			index = index + 1;
	 			if ($(this).attr("checked") == true) {
	 				var startHour = parseInt($("#startHour" + index).val());
	 				var startMin = parseInt($("#startMin" + index).val());
	 				var endHour = parseInt($("#endHour" + index).val());
	 				var endMin = parseInt($("#endMin" + index).val());
	 				if (startHour > endHour || (startHour == endHour && startMin >= endMin)) {
	 					error = true;
	 				}
	 			}
	 		});
	 		if (error) {
	 			alert("Giờ bắt đầu phải nhỏ hơn giờ kết thúc");
				return;
	 		}
	 		form.submit();
	 	}
	});
	
	jQuery.validator.addMethod("workingDay[]Required", function(value, element) {
		var result = false;
		
		return this.optional(element) || result;
	});
	
	
});

function turnOff() {
	$("#on").hide();
	$("#off").show();
	$("#turnOn").val("false");
}
function turnOn() {
	$("#on").show();
	$("#off").hide();
	$("#turnOn").val("true");
}
</script>

	<div class="left menu">
		<jsp:include page="include/profile-menu.jsp"></jsp:include>
	</div>
	<div class="left divider"></div>
	<div class="left admin-main">

		<div class="left">
			<form id="addRoom" method="post" action="/home/save-room">
			<div id="formContainer">
				<s:if test="%{needCompleteProfile == true}">
					<div class="warning">Vui lòng tạo phòng khám theo form bên dưới</div>
				</s:if>
				<h3 class="edit">
				<s:if test="%{room.name != ''}">
					Cập nhật phòng khám
				</s:if>
				<s:else> 
					Tạo phòng khám
				</s:else>
				</h3>
				
				<s:hidden name="roomId" value="%{roomId}"></s:hidden>
				<div>
					<span class="requried">*</span>Tên phòng khám
				</div>
				<div>
					<s:textfield name="roomName" id="roomName" value="%{room.name}" />
				</div>
				<div>
					Thông tin về phòng khám
				</div>
				<div>
					<s:textfield name="roomInfo" id="roomInfo" value="%{room.info}" />
				</div>
				<div>
					<span class="requried">*</span>Các ngày làm việc trong tuần
				</div>
				<div>
					<table class="working-table">
						<s:iterator value="scheduleList" status="status" id="schedule">
							<tr>
								<td><input type="checkbox" id="chk<s:property value="#status.count"/>" name='workingDay[<s:property value="#status.count"/>]' value='true' <s:if test='enable == true'>checked='checked'</s:if> />
									<s:property value="@com.ohs.fo.action.UserScheduleAction@getDayName(#status.count)" />
								</td>
								<td><label class="workingTime">Giờ bắt đầu:</label> 
									<s:select id="startHour%{#status.count}" list="workingHours" name="startHour[%{#status.count}]" value="%{startHour}" /> 
									<s:select id="startMin%{#status.count}" list="workingMins" name="startMin[%{#status.count}]" value="@com.ohs.fo.action.UserScheduleAction@formatMin(startMin)" /></td>
								<td><label class="workingTime">Giờ kết thúc:</label> 
									<s:select id="endHour%{#status.count}" list="workingHours" name="endHour[%{#status.count}]" value="%{endHour}" /> 
									<s:select id="endMin%{#status.count}" list="workingMins" name="endMin[%{#status.count}]" value="@com.ohs.fo.action.UserScheduleAction@formatMin(endMin)" /></td>
							</tr>
						</s:iterator>
					</table>
					<div id="errorDiv"></div>
					</div>
					<div>
						Giờ nghỉ trưa/chiều (để mặc định 0:00 nếu không sử dụng)<br/> 
						từ <s:select id="startBreakHour" list="workingHours" name="startBreakHour" value="%{startBreakHour}" /> 
						<s:select id="startBreakMin" list="workingMins" name="startBreakMin" value="@com.ohs.fo.action.UserScheduleAction@formatMin(startBreakMin)" />
						đến <s:select id="endBreakHour" list="workingHours" name="endBreakHour" value="%{endBreakHour}" /> 
						<s:select id="endBreakMin" list="workingMins" name="endBreakMin" value="@com.ohs.fo.action.UserScheduleAction@formatMin(endBreakMin)" /><br/><br/>
					</div>
					<div>
						<span class="requried">*</span>Thời gian khám trung bình cho 1 bệnh nhân:
						
					</div>
					<div>
						<s:select list="checkMins" name="timeInterval" value="%{timeInterval}"></s:select> phút
					</div>
					<div class="onOff">
						Bấm vào nút bên cạnh để thay đổi trạng thái cho phép đặt hẹn:
						<s:if test="%{turnOn == true}">
							<img id="on" src="<%=request.getContextPath() %>/images/on.png" onclick="turnOff();" class="hidden"/>
							<img id="off"  src="<%=request.getContextPath() %>/images/off.png" onclick="turnOn();"/> 
						</s:if>
						<s:else>
							<img id="on" src="<%=request.getContextPath() %>/images/on.png" onclick="turnOff();"/>
							<img id="off" src="<%=request.getContextPath() %>/images/off.png" onclick="turnOn();" class="hidden"/>
						</s:else>
						<s:hidden id="turnOn" name="turnOn" value="%{room.turnOn}"></s:hidden>
					</div>
					<div><i>(On: cho phép đặt hẹn. Off: tắt chức năng đặt hẹn)</i></div>
					<div>
					<br/>
						<a href="/home/profile-room" class="button">Hủy bỏ</a>
						<input type="submit" id="submitForm" value="Lưu" />
					</div>
				</div>
			</form>
		</div>
	</div>